﻿@page "/sliders"

<h3>Slider 滑块</h3>

<h4>通过拖动滑块在一个固定区间内进行选择</h4>

<Block Title="基础用法" Introduction="在拖动滑块时，改变当前值">
    <Slider></Slider>
    <Slider Value="50" Label="自定义初始值"></Slider>
    <Slider Value="42" IsDisabled="true" Label="禁用"></Slider>
</Block>

<Block Title="Slider 双向绑定" Introduction="通过拖动滑块在一个固定区间内进行选择">
    <div class="row g-3">
        <div class="col-12 col-sm-8">
            <Slider @bind-Value="@BindValue" Label="自定义初始值"></Slider>
        </div>
        <div class="col-12 col-sm-4">
            <BootstrapInput @bind-Value="@BindValue" readonly></BootstrapInput>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
